<template>
  <div class="buyfooter" v-show="isShow">
    <div class="buyfooter-container">
      <div class="left">
        <p>
          <span>￥{{ goodsPrice }}</span>
          或低至￥{{ (goodsPrice / 12).toFixed(2) }}×12期
        </p>
        <p>明天发货</p>
      </div>
      <div class="right">
        <button @click="$emit('footerGoCrat')">开始选购</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
  props: {
    goodsPrice: {
      default: 0,
    },
  },
  methods: {
    throttle(fn, wait) {
      let flag = true;
      return () => {
        if (!flag) {
          return;
        }
        flag = false;
        setTimeout(() => {
          fn();
          flag = true;
        }, wait);
      };
    },
    handleShow() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      this.isShow = scrollTop > 900 ? true : false;
    },
  },
  mounted() {
    window.addEventListener("scroll", this.throttle(this.handleShow,500));
  },
  destroyed() {
    window.removeEventListener("scroll", this.throttle);
  },
};
</script>

<style lang="scss" scoped>
.buyfooter {
  transition: all s;
  position: fixed;
  z-index: 999;
  bottom: 0;
  // height: 80px;
  width: 100vw;
  padding: 16px 0;
  background-color: white;
  .buyfooter-container {
    max-width: 1200px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    .left {
      p {
        font-style: 14px;
        line-height: 20px;
        span {
          font-size: 18px;
          font-weight: 550;
        }
      }
    }
    .right {
      button {
        width: 170px;
        height: 100%;
        text-align: center;
        // line-height: 70px;
        background-image: linear-gradient(0deg, #1890ff, #40a9ff);
        font-size: 22px;
        color: #fff;
        font-weight: 500;
        // margin-top: 20px;
        border-radius: 5px;
      }
    }
  }
}
</style>